import { Component, OnInit, ElementRef, Renderer2, AfterViewInit } from '@angular/core';
import { GoddessImg, Coordinate } from 'src/app/global/models';
import * as $ from 'jquery';
import {trigger, state, style, transition, animate} from "@angular/animations";

@Component({
  selector: 'app-fly2cart',
  templateUrl: './fly2cart.component.html',
  styleUrls: ['./fly2cart.component.css'],
  // animations:[
  //   trigger('imageState',[
  //     state('original',style({

  //     })),
  //     state('added',style({
  //       'top': '10px',
  //       'right': '10px',
  //       'width': '20px',
  //       'height': '20px',
  //       'position':'absolute'
  //     })),
  //     transition('original => added',animate('800ms linear'))
  //   ])
  // ]
})
export class Fly2cartComponent implements OnInit,AfterViewInit {

  goddess:Array<GoddessImg> = [
    { index:1,name:'1#女神' },{ index:2,name:'2#女神' },{ index:3,name:'3#女神' }
  ];

  targetCoordinate:Coordinate = null;
  count:number = 0;
  flyIndex:number = 0;
  duration:number = 500;
  visibleBall:boolean = false;
  ballVisible:string = "hidden";

  constructor(
    private elementRef:ElementRef,
    private renderer:Renderer2
  ) { }

  ngAfterViewInit(): void {
    this.targetCoordinate = this.getCartCoordinate();
  }

  ngOnInit(): void {
  }

  getCartCoordinate():Coordinate{
    let cartButton = this.elementRef.nativeElement.querySelector('button');
    const x = cartButton.offsetLeft + 24;
    const y = cartButton.offsetTop + 35;

    return new Coordinate(x,y);
  }

  addCart(imgIndex:number){
    this.fly2(imgIndex);
  }

  printCoor(){
    console.log(this.targetCoordinate);
  }



  fly2(index:number){
    setTimeout(() => {// 计时累加数字
      this.count++;
    }, this.duration);

    let imgToCopy = this.elementRef.nativeElement.querySelector(`#img${index}`);
    let imgParent = imgToCopy.parentElement;
    let imgClone = imgToCopy.cloneNode(false);
    console.log(imgToCopy.offsetLeft,imgToCopy.offsetTop);
    this.renderer.setStyle(imgClone,'position','absolute');
    this.renderer.setStyle(imgClone,'left',`${imgToCopy.offsetLeft}px`);
    this.renderer.setStyle(imgClone,'top',`${imgToCopy.offsetTop}px`);
    this.renderer.setStyle(imgClone,'width',`${imgToCopy.width}px`);
    this.renderer.setStyle(imgClone,'height',`${imgToCopy.height}px`);
    this.renderer.setStyle(imgClone,'z-index','100');

    this.flyIndex++;
    imgClone.setAttribute("id",`img_clone_${this.flyIndex}`)
    imgParent.appendChild(imgClone);
  
    // swing  linear
    $(`#img_clone_${this.flyIndex}`).animate({
      'top': this.targetCoordinate.y,
      'left':  this.targetCoordinate.x,
      'width': 0,
      'height': 0
    }, this.duration, 'linear');
  }

  ball2Cart(){

    let imgToCopy = this.elementRef.nativeElement.querySelector(`#btn`);
    let imgParent = imgToCopy.parentElement;
    let imgClone = this.renderer.createElement('img');

    this.renderer.setAttribute(imgClone,'src','assets/1.png');
    this.renderer.setStyle(imgClone,'position','absolute');
    this.renderer.setStyle(imgClone,'left',`${imgToCopy.offsetLeft}px`);
    this.renderer.setStyle(imgClone,'top',`${imgToCopy.offsetTop}px`);
    this.renderer.setStyle(imgClone,'width',`25px`);
    this.renderer.setStyle(imgClone,'height',`25px`);
    this.renderer.setStyle(imgClone,'z-index','100');

    this.flyIndex++;
    imgClone.setAttribute("id",`img_clone_${this.flyIndex}`)
    imgParent.appendChild(imgClone);
  
    $(`#img_clone_${this.flyIndex}`).animate({
      'top': this.targetCoordinate.y - 40,
      'left':  this.targetCoordinate.x,
      'width': `${imgToCopy.width}px`,
      'height': `${imgToCopy.height}px`
    }, this.duration, 'linear');

    setTimeout(() => {// 计时累加数字
      this.count++;
      this.renderer.removeChild(this.elementRef.nativeElement,imgClone);
    }, this.duration);
  }


  ball2Cart1(){
    let startPoint = this.elementRef.nativeElement.querySelector(`#btn`);
    let parentObj = startPoint.parentElement;
    let flyObj = this.renderer.createElement('img');
  
    this.renderer.setAttribute(flyObj,'src','assets/1.png');
    this.renderer.setStyle(flyObj,'position','absolute');
    this.renderer.setStyle(flyObj,'left',`${startPoint.offsetLeft}px`);
    this.renderer.setStyle(flyObj,'top',`${startPoint.offsetTop}px`);
    this.renderer.setStyle(flyObj,'width',`25px`);
    this.renderer.setStyle(flyObj,'height',`25px`);
    this.renderer.setStyle(flyObj,'z-index','100');
  
    this.flyIndex++;
    
    const flyObjID:string = "cc" + (Math.random()*100).toFixed(0).toString();
    // const flyObjID:string = "cc77";
    flyObj.setAttribute("id",`${flyObjID}`)
    parentObj.appendChild(flyObj);
  
    $(`#${flyObjID}`).animate({
      'top': this.targetCoordinate.y - 40,
      'left':  this.targetCoordinate.x,
      'width': `${startPoint.width}px`,
      'height': `${startPoint.height}px`
    }, this.duration, 'linear');
  
    setTimeout(() => {// 计时累加数字
      this.count++;
      this.renderer.removeChild(this.elementRef.nativeElement,flyObj);
    }, this.duration);
  }

}
